خواص تحريك الرسوم

تقوم خاصية الانتقالات transition في CSS3 بعمل عظيم من خلال بناء التفاعلات البصرية عند الانتقال من حالة إلى أخرى وهي مثالية من أجل هذا النوع من التّغييرات المبنية على تغيّر وحيد، ولكن عند الحاجة إلى مزيد من التّحكم مثل الحاجة إلى الانتقال بين عدة حالات عندها يتم استخدام التحريك animation.

transition

الخاصية transition في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات :

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

تسمح لنا تأثيرات الانتقال بالتحويل بين حالتين من حالات العنصر مع حركة، ويمكن تفعيل حالات العنصر باستخدام الأصناف الزائفة (pseudo-classes) مثل ‎:hover و ‎:active

animation

للبدء بعملية التحريك باستخدام CSS يجب أولًا تحديد عدة نقاط أساسية يمر بها العنصر بشكل إجباري، ولتنفيذ ذلك نستخدم القاعدة @keyframes والتي تتضمن اسم التحريك animation name ونقاط التحريك الأساسية وخصائصهم المساهمة في تحريك العنصر.

يمكن ترتيب القيم التابعة للخصائص الأخرى داخل الخاصية animation بالشكل التالي :

• animation-name

• animation-duration

• animation-delay

• animation-timing-function

• animation-iteration-count

• animation-direction

• animation-fill-mode

اضافة طابع جمالي للموقع

باستخدام مكتبات شائعة مثل :

• Animate.css

• GSAP

• Hover.css

• aos.js